<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
  	<a class="navbar-brand" href="/">
  		<img src="/img/logo.png" style="float: left; margin-top:-6px; margin-bottom:-20px; margin-left:10px; margin-right:10px;"> 
  		Grid paint
  	</a>
  </div>
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li id="top-menu-gallery"><a href="/gallery">Gallery</a></li>
      <li id="top-menu-my-images"><a href="/my-images">My images</a></li>
      <li id="top-menu-new-image"><a href="/new-image">New image</a></li>
    </ul>
            
    <ul class="nav navbar-nav navbar-right">
      {% if user_info.user_name%}
        {% if user_info.has_notifications %}
	        <li>
    	    	<a href="/notifications">
    	    	<span class="blink" style="color:#c00000;">
        		{{ user_info.notifications_count }}
        		<i class="icon-envelope"></i></span>
        		</a>
        	</li>
        {% endif %}
        <li class="dropdown">
		    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
		      {% if user_info.superadmin %}&nbsp;<i class="icon-star-empty"></i>{% endif%}
		      {{ user_info.user_name }}<b class="caret"></b>
		    </a>
		    <ul class="dropdown-menu">
		    {% if user_info.has_profile %}
		  	  	<li><a href="/my-profile">My profile</a></li>
		    	<li class="delimiter"></li>
		    {% endif %}
		  	  <li><a href="{{ user_info.login_url }}">{{ user_info.login_url_text }}</a></li>
		    </ul>
        </li>      
      {% else %}
        <li>
		  <a href="{{ user_info.login_url }}">{{ user_info.login_url_text }}</a>
        </li>
      {% endif %}
        <li style="width:20px;"></li>
    </ul>
    
    <form class="navbar-form navbar-right" role="search" method="GET" action="/gallery">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search" value="{{ search_query }}" name="q" autocomplete="off">
      </div>
      <button type="submit" class="btn btn-success">Search</button>
    </form>

  </div>
  
</nav>

<script>
$.fn.flash = function(duration, iterations) {
    duration = duration || 1000; // Default to 1 second
    iterations = iterations || 1; // Default to 1 iteration
    var iterationDuration = duration / iterations;

    for (var i = 0; i < iterations; i++) {
        this.fadeOut(iterationDuration).fadeIn(iterationDuration);
    }
}


$(function() {
	$("input[name=q]")
		.typeahead({
			name: "dataset",
			remote: "/tag-typeahead?query=%QUERY"
		})
		
	$('.blink').flash(5000,10);
});

</script>